<template>
    <div ref="editor"></div>
</template>

<script>
import E from 'wangeditor'
import xss from 'xss'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

    export default {
        name: 'editor',
        model: {
            prop: 'content',
            event: 'watch'
        },
        props: ['content'],
        data () {
            return {
                editorContent: ''
            }
        },
        watch: {
          // eslint-disable-next-line no-unused-vars
            editorContent(newVal){
                this.$emit('watch', this.editorContent)
            }
        },
        mounted() {
           this.initEditor();
        },
        methods: {
          initEditor(){

            let editor = new E(this.$refs.editor)

            // 挂载highlight插件 (代码高亮)
            editor.highlight = hljs

            // editor.customConfig.uploadImgShowBase64 = true
            // 设置 图片上传地址
            editor.config.uploadImgServer = '/api/platform-user/fileUploadController/fileUpload'
            // editor.config.uploadImgServer = '/api/oss/fileUpload'
            // 图片大小限制 10M
            editor.config.uploadImgMaxSize = 1024 * 1024 * 10
            // 一次最多传 10 张
            editor.config.uploadImgMaxLength = 10

            editor.config.uploadFileName = 'file' //文件名

            editor.config.uploadImgHeaders = {
              'Authorization': 'Basic c3R1ZGVudDpzdHVkZW50X3NlY3JldA==',
              'platform-auth': 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLnrqHnkIblkZgiLCJhdmF0YXIiOiIiLCJhdXRob3JpdGllcyI6WyJhZG1pbiJdLCJjbGllbnRfaWQiOiJzdHVkZW50Iiwicm9sZV9uYW1lIjoiYWRtaW4iLCJsaWNlbnNlIjoicG93ZXJlZCBieSBwbGF0Zm9ybXgiLCJ1c2VyX2lkIjoxLCJyb2xlX2lkIjoiMSIsInNjb3BlIjpbImFsbCJdLCJleHAiOjE2MTg3NTM0MzMsImp0aSI6ImM4YWU4NmY0LWEyNzgtNDE2OS04MjU1LTU0ZGQ0NTc0Y2JmOCIsImFjY291bnQiOiJhZG1pbiIsInRlbmFudF9jb2RlIjoiMDAwMDAwIn0.WLQz_ASOr4N4Y1LWhnO1yZbgr_eQ4QpSFi-_ggxzBkc'
            }

            editor.config.uploadImgHooks = {
              // 上传图片之前
              before: function(xhr) {
                console.log(xhr)

              },
              // 图片上传并返回了结果，图片插入已成功
              success: function(xhr) {
                console.log('success', xhr)
              },
              // 图片上传并返回了结果，但图片插入时出错了
              fail: function(xhr, editor, resData) {
                console.log('fail', resData)
              },
              // 上传图片出错，一般为 http 请求的错误
              error: function(xhr, editor, resData) {
                console.log('error', xhr, resData)
              },
              // 上传图片超时
              // eslint-disable-next-line no-unused-vars
              timeout: function(xhr) {
                console.log('timeout')
              },
              // 图片上传并返回了结果，想要自己把图片插入到编辑器中
              // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
              customInsert: function(insertImgFn, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)

                // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                // insertImgFn(result.data[0])
                insertImgFn(result.data.fileUrl)
              }
            }


            editor.config.onchange = (html) => {
              let safeHtml = xss(html)
              // safeHtml = safeHtml.replace(/\bm.*?;/, "width:300px"); //更改插入到富文本里图片的宽度
              this.editorContent = safeHtml
            }
            editor.create()
            this.$emit('setInner', editor)

          }
        }
    }
</script>

<style scoped>

</style>